<template>
	<view>
		<u-tabbar
			:placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item>
				<view slot="inactive-icon" class="icon-container">
					<u-icon size="25" name="checkmark-circle"></u-icon>
					<view class="icon-text">
						<u--text :text="successCount" type="success"></u--text>
					</view>
				</view>
			</u-tabbar-item>
			<u-tabbar-item>
				<view slot="inactive-icon" class="icon-container">
					<u-icon size="25" name="close-circle"></u-icon>
					<view class="icon-text">
						<u--text :text="errorCount" type="error"></u--text>
					</view>
				</view>
			</u-tabbar-item>
			<u-tabbar-item @click="handleVisible">
				<view slot="inactive-icon" class="icon-container">
					<u-icon size="25" name="grid"></u-icon>
					<view class="icon-text">
						<u--text :text="pageNo"></u--text>
					</view>
				</view>
			</u-tabbar-item>
			<u-tabbar-item @click="handleCollect">
				<view slot="inactive-icon" class="icon-container">
					<u-icon size="25" :name="collectIcon" color="#f0ad4e"></u-icon>
					<view class="icon-text">
						<u--text text="收藏"></u--text>
					</view>
				</view>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
export default {
	props: {
		successCount: {
			type: Number,
			default: 0
		},
		errorCount: {
			type: Number,
			default: 0
		},
		collect: {
			type: Boolean,
			default: false
		},
		pageNo: {
			type: String,
			require: true
		}
	},
	computed: {
		collectIcon() {
			return this.collect ? 'star-fill' : 'star'
		}
	},
	methods: {
		handleCollect() {
			this.$emit("collect")
		},
		handleVisible() {
			this.$emit('showList')
		}
	}
}
</script>

<style lang="scss" scoped>
	.icon-container {
		display: flex;
		align-items: center;
	}
	.icon-text {
		padding-left: 8rpx;
	}
</style>